<template>
  <el-button :size="size" :type="type" :loading="isLoading" @click="handleClick">
    <slot />
  </el-button>
</template>
<script lang="ts">
  export default { name: 'ButtonComponent' }
</script>
<script setup lang="ts">
  import type { PropsInterface, EmitsInterface } from './types/props'
  const props = withDefaults(defineProps<PropsInterface>(), {
    type: () => 'default',
    size: '',
  })
  const emit = defineEmits<EmitsInterface>()
  const isLoading = ref(false)

  const handleClick = () => {
    const isFunction = Object.prototype.toString.call(props.beforeChange) === '[object Function]'
    if (!isFunction) {
      emit('click')
      return
    }
    // console.log(isFunction)
    isLoading.value = true
    props
      .beforeChange()
      .then(() => {
        isLoading.value = false
      })
      .catch(() => {
        isLoading.value = false
      })
  }
</script>
